<template><div><h1 id="字符串api" tabindex="-1"><a class="header-anchor" href="#字符串api" aria-hidden="true">#</a> 字符串API</h1>
<h2 id="_1-字符串类型转换" tabindex="-1"><a class="header-anchor" href="#_1-字符串类型转换" aria-hidden="true">#</a> 1.字符串类型转换</h2>
<h3 id="原始数据类型转-string" tabindex="-1"><a class="header-anchor" href="#原始数据类型转-string" aria-hidden="true">#</a> 原始数据类型转 string</h3>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token function">String</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">String</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span> <span class="token comment">// "123"</span>
<span class="token function">String</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">)</span> <span class="token comment">// "abc"</span>
<span class="token function">String</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token comment">// "true"</span>
<span class="token function">String</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">// "undefined"</span>
<span class="token function">String</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token comment">// "null"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="string-转其他类型" tabindex="-1"><a class="header-anchor" href="#string-转其他类型" aria-hidden="true">#</a> string 转其他类型</h3>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token comment">//数字</span>
<span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token comment">// 0 </span>

<span class="token comment">//布尔</span>
<span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token comment">// 0</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-字符串分割" tabindex="-1"><a class="header-anchor" href="#_2-字符串分割" aria-hidden="true">#</a> 2.字符串分割</h2>
<h3 id="split" tabindex="-1"><a class="header-anchor" href="#split" aria-hidden="true">#</a> split()</h3>
<div class="language-JavaScript line-numbers-mode" data-ext="JavaScript"><pre v-pre class="language-JavaScript"><code>//使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: &quot;fox&quot;

const chars = str.split('');
console.log(chars[8]);
// expected output: &quot;k&quot;

const strCopy = str.split();
console.log(strCopy);
// expected output: Array [&quot;The quick brown fox jumps over the lazy dog.&quot;]
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-获取字符串长度" tabindex="-1"><a class="header-anchor" href="#_3-获取字符串长度" aria-hidden="true">#</a> 3.获取字符串长度</h2>
<h3 id="length属性" tabindex="-1"><a class="header-anchor" href="#length属性" aria-hidden="true">#</a> length属性</h3>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">var</span> myStr <span class="token operator">=</span> <span class="token string">"I,Love,You,Do,you,love,me"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> myStrLength <span class="token operator">=</span> myStr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//25</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-查询子字符串" tabindex="-1"><a class="header-anchor" href="#_4-查询子字符串" aria-hidden="true">#</a> 4.查询子字符串</h2>
<h3 id="indexof" tabindex="-1"><a class="header-anchor" href="#indexof" aria-hidden="true">#</a> indexOf()</h3>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token comment">//返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1</span>

<span class="token keyword">const</span> paragraph <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> searchTerm <span class="token operator">=</span> <span class="token string">'dog'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> indexOfFirst <span class="token operator">=</span> paragraph<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>searchTerm<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The index of the first "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>searchTerm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" from the beginning is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>indexOfFirst<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "The index of the first "dog" from the beginning is 40"</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The index of the 2nd "</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>searchTerm<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>paragraph<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>searchTerm<span class="token punctuation">,</span> <span class="token punctuation">(</span>indexOfFirst <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "The index of the 2nd "dog" is 52"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="lastindexof" tabindex="-1"><a class="header-anchor" href="#lastindexof" aria-hidden="true">#</a> lastIndexOf()</h3>
<p><strong>lastIndexOf()</strong> 方法返回调用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer"><code v-pre>String</code><ExternalLinkIcon/></a> 对象的指定值最后一次出现的索引，在一个字符串中的指定位置 <code v-pre>fromIndex</code>处从后向前搜索。如果没找到这个特定值则返回-1 。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token comment">//字符串中的字符被从左向右索引。首字符的索引（index）是 0，最后一个字符的索引是 stringName.length - 1。</span>

<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// returns 3 （没有指明fromIndex则从末尾l处开始反向检索到的第一个a出现在l的后面，即index为3的位置）</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// returns 1（指明fromIndex为2则从n处反向向回检索到其后面就是a，即index为1的位置）</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// returns -1(指明fromIndex为0则从c处向左回向检索a发现没有，故返回-1)</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'x'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// returns -1</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns 0（指明fromIndex为-5则视同0，从c处向左回向查找发现自己就是，故返回0）</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// returns 0（指明fromIndex为0则从c处向左回向查找c发现自己就是，故返回自己的索引0）</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// returns 5</span>
<span class="token string">'canal'</span><span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// returns 2</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-字符串替换" tabindex="-1"><a class="header-anchor" href="#_5-字符串替换" aria-hidden="true">#</a> 5.字符串替换</h2>
<h3 id="replace" tabindex="-1"><a class="header-anchor" href="#replace" aria-hidden="true">#</a> replace()</h3>
<p><strong>replace()</strong> 方法返回一个由替换值（<code v-pre>replacement</code>）替换部分或所有的模式（<code v-pre>pattern</code>）匹配项后的新字符串。模式可以是一个字符串或者一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank" rel="noopener noreferrer">正则表达式<ExternalLinkIcon/></a>，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。<strong>如果pattern是字符串，则仅替换第一个匹配项。</strong></p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token comment">//提取字符串中的数字</span>
<span class="token keyword">var</span> s <span class="token operator">=</span><span class="token string">"价格4500元，等级：2"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//45002</span>

<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'dog'</span><span class="token punctuation">,</span> <span class="token string">'monkey'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"</span>


<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">Dog</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>regex<span class="token punctuation">,</span> <span class="token string">'ferret'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-查找给定位置的字符或其字符编码值" tabindex="-1"><a class="header-anchor" href="#_6-查找给定位置的字符或其字符编码值" aria-hidden="true">#</a> 6.查找给定位置的字符或其字符编码值</h2>
<h3 id="charat" tabindex="-1"><a class="header-anchor" href="#charat" aria-hidden="true">#</a> charAt()</h3>
<p><strong>charAt()</strong> 方法从一个字符串中返回指定的字符。</p>
<div class="language-JavaScript line-numbers-mode" data-ext="JavaScript"><pre v-pre class="language-JavaScript"><code>var anyString = &quot;Brave new world&quot;;

console.log(&quot;The character at index 0   is '&quot; + anyString.charAt(0)   + &quot;'&quot;);
console.log(&quot;The character at index 1   is '&quot; + anyString.charAt(1)   + &quot;'&quot;);
console.log(&quot;The character at index 2   is '&quot; + anyString.charAt(2)   + &quot;'&quot;);
console.log(&quot;The character at index 3   is '&quot; + anyString.charAt(3)   + &quot;'&quot;);
console.log(&quot;The character at index 4   is '&quot; + anyString.charAt(4)   + &quot;'&quot;);
console.log(&quot;The character at index 999 is '&quot; + anyString.charAt(999) + &quot;'&quot;);

//上面代码的输出为：
The character at index 0 is 'B'
The character at index 1 is 'r'
The character at index 2 is 'a'
The character at index 3 is 'v'
The character at index 4 is 'e'
The character at index 999 is ''
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="charcodeat" tabindex="-1"><a class="header-anchor" href="#charcodeat" aria-hidden="true">#</a> charCodeAt</h3>
<p><strong><code v-pre>charCodeAt()</code></strong> 方法返回 <code v-pre>0</code> 到 <code v-pre>65535</code> 之间的整数，表示给定索引处的 UTF-16 代码单元</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> sentence <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog.'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> index <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The character code </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sentence<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is equal to </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sentence<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "The character code 113 is equal to q"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-字符串连接" tabindex="-1"><a class="header-anchor" href="#_7-字符串连接" aria-hidden="true">#</a> 7.字符串连接</h2>
<h3 id="加号" tabindex="-1"><a class="header-anchor" href="#加号" aria-hidden="true">#</a> 加号 +</h3>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">var</span> str1 <span class="token operator">=</span> <span class="token string">"I,love,you!"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">"Do,you,love,me?"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> str1 <span class="token operator">+</span> str2 <span class="token operator">+</span> <span class="token string">"Yes!"</span><span class="token punctuation">;</span><span class="token comment">//"I,love,you!Do,you,love,me?Yes!"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat()</h3>
<p><strong>concat()</strong> 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">let</span> hello <span class="token operator">=</span> <span class="token string">'Hello, '</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>hello<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token string">'Kevin'</span><span class="token punctuation">,</span> <span class="token string">'. Have a nice day.'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">// Hello, Kevin. Have a nice day.</span>

<span class="token keyword">let</span> greetList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Hello'</span><span class="token punctuation">,</span> <span class="token string">' '</span><span class="token punctuation">,</span> <span class="token string">'Venkat'</span><span class="token punctuation">,</span> <span class="token string">'!'</span><span class="token punctuation">]</span>
<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>greetList<span class="token punctuation">)</span>  <span class="token comment">// "Hello Venkat!"</span>

<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>    <span class="token comment">// [object Object]</span>
<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>    <span class="token comment">// ""</span>
<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>  <span class="token comment">// "null"</span>
<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>  <span class="token comment">// "true"</span>
<span class="token string">""</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span>  <span class="token comment">// "45"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_8-字符串提取" tabindex="-1"><a class="header-anchor" href="#_8-字符串提取" aria-hidden="true">#</a> 8.字符串提取</h2>
<h3 id="slice" tabindex="-1"><a class="header-anchor" href="#slice" aria-hidden="true">#</a> slice()</h3>
<p><strong>slice()</strong> 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog.'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">31</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "the lazy dog."</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "quick brown fox"</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "dog."</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "lazy"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="substring" tabindex="-1"><a class="header-anchor" href="#substring" aria-hidden="true">#</a> substring()</h3>
<p><strong>substring()</strong> 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">var</span> anyString <span class="token operator">=</span> <span class="token string">"Mozilla"</span><span class="token punctuation">;</span>

<span class="token comment">// 输出 "Moz"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 输出 "lla"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 输出 ""</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 输出 "Mozill"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 输出 "Mozilla"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anyString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="substr" tabindex="-1"><a class="header-anchor" href="#substr" aria-hidden="true">#</a> substr()</h3>
<p>**<code v-pre>substr()</code> **方法返回一个字符串中从指定位置开始到指定字符数的字符</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"abcdefghij"</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(1,2): "</span>    <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// (1,2): bc</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(-3,2): "</span>   <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// (-3,2): hi</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(-3): "</span>     <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// (-3): hij</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(1): "</span>      <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// (1): bcdefghij</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(-20, 2): "</span> <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// (-20, 2): ab</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"(20, 2): "</span>  <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// (20, 2):</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_9-字符串大小写转换" tabindex="-1"><a class="header-anchor" href="#_9-字符串大小写转换" aria-hidden="true">#</a> 9.字符串大小写转换</h2>
<h3 id="tolowercase" tabindex="-1"><a class="header-anchor" href="#tolowercase" aria-hidden="true">#</a> toLowerCase()</h3>
<p><strong><code v-pre>toLowerCase()</code></strong> 会将调用该方法的字符串值转为小写形式，并返回</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'中文简体 zh-CN || zh-Hans'</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 中文简体 zh-cn || zh-hans</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">"ALPHABET"</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// "alphabet"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="touppercase" tabindex="-1"><a class="header-anchor" href="#touppercase" aria-hidden="true">#</a> toUpperCase()</h3>
<p><strong>toUpperCase()</strong> 方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> sentence <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog.'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>sentence<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_10-字符串匹配" tabindex="-1"><a class="header-anchor" href="#_10-字符串匹配" aria-hidden="true">#</a> 10. 字符串匹配</h2>
<h3 id="match" tabindex="-1"><a class="header-anchor" href="#match" aria-hidden="true">#</a> match()</h3>
<p><strong>match()</strong> 方法检索返回一个字符串匹配正则表达式的结果。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> paragraph <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog. It barked.'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[A-Z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> found <span class="token operator">=</span> paragraph<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>regex<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>found<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: Array ["T", "I"]</span>

<span class="token keyword">var</span> myStr <span class="token operator">=</span> <span class="token string">"I,love,you,Do,you,love,me"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> pattern <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">love</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> myStr<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>pattern<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//["love"]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result <span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>input <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//I,love,you,Do,you,love,me</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="search" tabindex="-1"><a class="header-anchor" href="#search" aria-hidden="true">#</a> search()</h3>
<p><strong>search()</strong> 方法执行正则表达式和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer"><code v-pre>String</code><ExternalLinkIcon/></a> 对象之间的一个搜索匹配。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> paragraph <span class="token operator">=</span> <span class="token string">'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?'</span><span class="token punctuation">;</span>

<span class="token comment">// any character that is not a word character or whitespace</span>
<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^\w\s]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>paragraph<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span>regex<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: 43</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>paragraph<span class="token punctuation">[</span>paragraph<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span>regex<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// expected output: "."</span>

<span class="token keyword">var</span> myStr <span class="token operator">=</span> <span class="token string">"I,love,you,Do,you,love,me"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> pattern <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">love</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> myStr<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span>pattern<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_11-字符串比较" tabindex="-1"><a class="header-anchor" href="#_11-字符串比较" aria-hidden="true">#</a> 11.字符串比较</h2>
<h3 id="localecompare" tabindex="-1"><a class="header-anchor" href="#localecompare" aria-hidden="true">#</a> localeCompare()</h3>
<p><strong>localeCompare()</strong> 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token comment">// The letter "a" is before "c" yielding a negative value</span>
<span class="token string">'a'</span><span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span><span class="token string">'c'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// -1</span>

<span class="token comment">// Alphabetically the word "check" comes after "against" yielding a positive value</span>
<span class="token string">'check'</span><span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span><span class="token string">'against'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 1</span>

<span class="token comment">// "a" and "a" are equivalent yielding a neutral value of zero</span>
<span class="token string">'a'</span><span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 0</span>

<span class="token keyword">var</span> myStr <span class="token operator">=</span> <span class="token string">"chicken"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> myStrTwo <span class="token operator">=</span> <span class="token string">"egg"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> first <span class="token operator">=</span> myStr<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>myStrTwo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -1</span>
first <span class="token operator">=</span> myStr<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span><span class="token string">"chicken"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span>
first <span class="token operator">=</span> myStr<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span><span class="token string">"apple"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_12-补齐字符串的长度" tabindex="-1"><a class="header-anchor" href="#_12-补齐字符串的长度" aria-hidden="true">#</a> 12.补齐字符串的长度</h2>
<h3 id="padstart" tabindex="-1"><a class="header-anchor" href="#padstart" aria-hidden="true">#</a> padStart()</h3>
<p><code v-pre>padStart()</code>用于头部补全。该方法有两个参数，其中第一个参数是一个数字，表示字符串补齐之后的长度；第二个参数是用来补全的字符串。</p>
<ul>
<li>如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串：</li>
</ul>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'x'</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul>
<li>如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串：</li>
</ul>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'ababx'</span>
<span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'abax'</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>如果省略第二个参数，默认使用空格补全长度：</li>
</ul>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'a   '</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul>
<li>padStart()的常见用途是为数值补全指定位数，笔者最近做的一个需求就是将返回的页数补齐为三位，比如第1页就显示为001，就可以使用该方法来操作：</li>
</ul>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token string">"1"</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span>   <span class="token comment">// 输出结果： '001'</span>
<span class="token string">"15"</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">)</span>  <span class="token comment">// 输出结果： '015</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="padend" tabindex="-1"><a class="header-anchor" href="#padend" aria-hidden="true">#</a> padEnd()</h3>
<p><code v-pre>padEnd()</code>用于尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padEnd</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'xabab'</span>
<span class="token string">'x'</span><span class="token punctuation">.</span><span class="token function">padEnd</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">'ab'</span><span class="token punctuation">)</span> <span class="token comment">// 'xaba'</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_13-移除字符串首尾空白符" tabindex="-1"><a class="header-anchor" href="#_13-移除字符串首尾空白符" aria-hidden="true">#</a> 13.移除字符串首尾空白符</h2>
<h3 id="trimstart" tabindex="-1"><a class="header-anchor" href="#trimstart" aria-hidden="true">#</a> trimStart()</h3>
<p>trimStart() 方法的的行为与<code v-pre>trim()</code>一致，不过会返回一个<strong>从原始字符串的开头删除了空白的新字符串</strong>，不会修改原始字符串：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token string">'  abc  '</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">// "abc  "</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="trimend" tabindex="-1"><a class="header-anchor" href="#trimend" aria-hidden="true">#</a> trimEnd()</h3>
<p>trimEnd() 方法的的行为与<code v-pre>trim()</code>一致，不过会返回一个<strong>从原始字符串的结尾删除了空白的新字符串</strong>，不会修改原始字符串：</p>
<div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token string">'  abc  '</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">// "  abc"</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


